<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<title>tabledisplay</title>
		
		<!--表格样式 -->
		<style type="text/css">
			
			.table{border:1px solid #ccc;display: table;border-collapse: collapse;}
			.table-row{display: table-row}
			.table-row div{height:20px;display:table-cell;vertical-align: middle;min-width: 150px;min-height:40px;padding:5px;border:1px solid #ccc;}
			.table-row:hover{background-color: #f6f6f6;}
		</style>
		
		<style type="text/css">
			
			.overflow{overflow-y: scroll;width:800px;height: 500px;-webkit-columns: 300px 3;border:1px solid red;padding:10px;}
			.overflow div{background: #eee;}
			
			#qx{margin-left:200px;width:100px;height:30px;-webkit-transform-origin:0 50%;-webkit-transform:rotate(-5deg) scale(.2);background: #eee;border:1px solid red;}
			
		</style>
		
		<style>
			
			#clock {
				-webkit-transform: scale(0.57);
				position: relative;
				width: 600px;
				height: 600px;
				margin: 0 auto;
				padding: 0;
				margin-left:10px;
				border:1px solid red;
				background: url('template/image/clock.jpg');
			}
			#clock li {
				list-style: none;
			}
			#second,#minute,#hour {
				position: absolute;
				width: 30px;
				height: 600px;
				top: 0px;
				left: 285px;
			}
			#hour {
				background: url('template/image/hand_hour.png');
				z-index: 1;
			}
			#minute {
				background: url('template/image/hand_minute.png');
				z-index: 2;
			}
			#second {
				background: url('template/image/hand_second.png');
				z-index: 3;
			}
			a:hover{-webkit-transform:rotate(120deg) scale(.2);}	
		</style>
		<style type="text/css">
			.animo{-webkit-animation:animations 2s ease-out infinite ;}
			@-webkit-keyframes animations{
				0%{-webkit-transform:translate(0);opacity:0;}
				50%{-webkit-transform:translate(30px);opacity:1;}
				70%{-webkit-transform:translate(35px);opacity:1;}
				100%{-webkit-transform:translate(60px);opacity:0;}
			}
		</style>
		<script src="js/jquery.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				var i=0;
				
				setInterval(function(){
					
					i=i>360 ? 0:i;
					var s="rotate("+i+"deg) scale("+(i/360)+")";
					$("#qx").css({WebkitTransform :s});
					i++;
				});
				
				setInterval(function(){
					var date=new Date();
					var hour=date.getHours();
					var minute=date.getMinutes();
					var second=date.getSeconds();
					var minsecond=date.getMilliseconds();
					
					remote2($("#second"),(second+minsecond/1000)*6);
					remote2($("#minute"),(minute+second/60)*6);
					remote2($("#hour"),(hour+minute/60)*30);
				});
				
				
				
			});
						
			function remote2(obj,du){
					
					var s="rotate("+du+"deg)";
					
					obj.css({WebkitTransform :s});
			}
			
		</script>
	</head>
	<body>
		<div>
			<h1>表格样式----------数据</h1>
			<div style="display: table-cell;height:200px;vertical-align: middle;width:200px;">asfdasdf</div>
			<div class="table">
				<div class="table-row">
					<div>姓名</div><div>年龄</div><div>电话</div>
				</div><div class="table-row">
					<div>姓名</div><div>年龄</div><div>电话</div>
				</div><div class="table-row">
					<div>姓名</div><div>年龄</div><div>电话</div>
				</div><div class="table-row">
					<div>姓名</div><div>年龄</div><div>电话</div>
				</div><div class="table-row">
					<div>姓名</div><div>年龄</div><div>电话</div>
				</div>
				
			</div>
			
		</div>
		
		<div>
			<h1>滚动条-------现</h1>
			<div class="overflow" id="text">
				<div>SELECT IMAGE_3_LINK,FEEDID,FRIEND,TITLE_DATA,BODY_DATA,ICON,DATELINE,HASH_DATA,TITLE_TEMPLATE,IMAGE_1_LINK,APPID,BODY_TEMPLATE,IMAGE_4,USERNAME,IMAGE_1,IMAGE_3,IMAGE_4_LINK,TARGET_IDS,IDTYPE,"uid",BODY_GENERAL,IMAGE_2_LINK,ID,HASH_TEMPLATE,IMAGE_2,HOT FROM jchome_feed /*+ index(jchome_feed jchome_feed_hot) */ WHERE dateline>='1.340523459E9' ORDER BY hot DESC ;
SELECT IMAGE_3_LINK,FEEDID,FRIEND,TITLE_DATA,BODY_DATA,ICON,DATELINE,HASH_DATA,TITLE_TEMPLATE,IMAGE_1_LINK,APPID,BODY_TEMPLATE,IMAGE_4,USERNAME,IMAGE_1,IMAGE_3,IMAGE_4_LINK,TARGET_IDS,IDTYPE,"uid",BODY_GENERAL,IMAGE_2_LINK,ID,HASH_TEMPLATE,IMAGE_2,HOT FROM jchome_feed /*+ index(jchome_feed jchome_feed_hot) */ WHERE dateline>='1.340523462E9' ORDER BY hot DESC ;
SELECT PASSWORD,FRIEND,DATELINE,ALBUMNAME,ALBUMID,USERNAME,PICFLAG,TARGET_IDS,"uid",UPDATETIME,PIC,PICNUM FROM jchome_album /*+ index(jchome_album jchome_album_updatetime) */ WHERE "uid" IN (2,1) ORDER BY updatetime DESC ;
SELECT IMAGE_LINK,HOTUSER,CREDIT,NOTENUM,EVENTINVITENUM,THREADNUM,ATTACHSIZE,BODY_DATA,LASTSEARCH,NEWPM,MOOD,main.DATELINE,TITLE_TEMPLATE,SHOWGIFTLINK,BODY_TEMPLATE,DOINGNUM,ALBUMNUM,POLLNUM,EVENTNUM,SHARENUM,IP,GIFTNUM,SID,TOPICID,main.USERNAME,EXPERIENCE,REGIP,GROUPID,MTAGINVITENUM,BLOGNUM,LASTLOGIN,ADDSIZE,ADDFRIEND,main."uid",BODY_GENERAL,IMAGE,NAME,NAMESTATUS,VIDEOSTATUS,VIEWNUM,POKENUM,UPDATETIME,LASTPOST,LASTSEND,AVATAR,TYPE,HOT,DOMAIN,FRIENDNUM,ADDFRIENDNUM,MYINVITENUM,FLAG,ADVGIFTCOUNT FROM jchome_share main LEFT JOIN jchome_space space ON space."uid"=main."uid" WHERE 1=1 ORDER BY main.dateline desc;
SELECT BUYCOUNT,SENDERID,TIMED,ICON,QUIET,STATUS,TYPEID,RECEIPTTIME,GRID,SENDER,PRICE,RECEIVER,gr.GIFTID,TIPS,ADDTIME,GIFTNAME,RECEIVERID,ANONYMOUS,FEE FROM jchome_giftreceived gr INNER JOIN jchome_gift g ON gr.giftid=g.giftid WHERE gr.receiverid='3' ORDER BY gr.fee DESC, gr.receipttime DESC ;
SELECT BUYCOUNT,TYPENAME,ICON,g.TYPEID,PRICE,GIFTID,TIPS,ADDTIME,GIFTNAME,FEE,"order" FROM jchome_gift g INNER JOIN jchome_gifttype gt ON g.typeid=gt.typeid WHERE g.typeid='defGift' ;
SELECT BUYCOUNT,SENDERID,TIMED,SENDTIME,GSID,ICON,QUIET,TYPEID,SENDER,PRICE,RECEIVER,gs.GIFTID,TIPS,ADDTIME,GIFTNAME,RECEIVERID,ANONYMOUS,FEE FROM jchome_giftsent gs INNER JOIN jchome_gift g ON gs.giftid=g.giftid WHERE gs.senderid='3' ORDER BY sendtime DESC ;
SELECT IMAGE_LINK,HOTUSER,CREDIT,NOTENUM,EVENTINVITENUM,THREADNUM,ATTACHSIZE,BODY_DATA,LASTSEARCH,NEWPM,MOOD,main.DATELINE,TITLE_TEMPLATE,SHOWGIFTLINK,BODY_TEMPLATE,DOINGNUM,ALBUMNUM,POLLNUM,EVENTNUM,SHARENUM,IP,GIFTNUM,SID,TOPICID,main.USERNAME,EXPERIENCE,REGIP,GROUPID,MTAGINVITENUM,BLOGNUM,LASTLOGIN,ADDSIZE,ADDFRIEND,main."uid",BODY_GENERAL,IMAGE,NAME,NAMESTATUS,VIDEOSTATUS,VIEWNUM,POKENUM,UPDATETIME,LASTPOST,LASTSEND,AVATAR,TYPE,HOT,DOMAIN,FRIENDNUM,ADDFRIENDNUM,MYINVITENUM,FLAG,ADVGIFTCOUNT FROM jchome_share main LEFT JOIN jchome_space space ON space."uid"=main."uid" WHERE 1=1 ORDER BY main.dateline desc;
SELECT REPLYNUM,MOOD,DATELINE,MESSAGE,"from",IP,USERNAME,DOID,"uid" FROM jchome_doing /*+ index(jchome_doing jchome_doing_dateline) */ WHERE 1=1 ORDER BY dateline DESC ;
SELECT REPLYNUM,MOOD,DATELINE,MESSAGE,"from",IP,USERNAME,DOID,"uid" FROM jchome_doing /*+ index(jchome_doing jchome_doing_dateline) */ WHERE 1=1 ORDER BY dateline DESC ;
SELECT REPLYNUM,MOOD,DATELINE,MESSAGE,"from",IP,USERNAME,DOID,"uid" FROM jchome_doing /*+ index(jchome_doing jchome_doing_dateline) */ WHERE 1=1 ORDER BY dateline DESC ;
SELECT REPLYNUM,MOOD,DATELINE,MESSAGE,"from",IP,USERNAME,DOID,"uid" FROM jchome_doing /*+ index(jchome_doing jchome_doing_dateline) */ WHERE 1=1 ORDER BY dateline DESC ;
SELECT REPLYNUM,MOOD,DATELINE,MESSAGE,"from",IP,USERNAME,DOID,"uid" FROM jchome_doing /*+ index(jchome_doing jchome_doing_dateline) */ WHERE 1=1 ORDER BY dateline DESC ;
SELECT BUYCOUNT,SENDERID,TIMED,ICON,QUIET,STATUS,TYPEID,RECEIPTTIME,GRID,SENDER,PRICE,RECEIVER,gr.GIFTID,TIPS,ADDTIME,GIFTNAME,RECEIVERID,ANONYMOUS,FEE FROM jchome_giftreceived gr INNER JOIN jchome_gift g ON gr.giftid=g.giftid WHERE gr.receiverid='1' ORDER BY gr.fee DESC, gr.receipttime DESC ;
SELECT REPLYNUM,MOOD,DATELINE,MESSAGE,"from",IP,USERNAME,DOID,"uid" FROM jchome_doing /*+ index(jchome_doing jchome_doing_dateline) */ WHERE 1=1 ORDER BY dateline DESC ;
SELECT IMAGE_3_LINK,FEEDID,FRIEND,TITLE_DATA,BODY_DATA,ICON,DATELINE,HASH_DATA,TITLE_TEMPLATE,IMAGE_1_LINK,APPID,BODY_TEMPLATE,IMAGE_4,USERNAME,IMAGE_1,IMAGE_3,IMAGE_4_LINK,TARGET_IDS,IDTYPE,"uid",BODY_GENERAL,IMAGE_2_LINK,ID,HASH_TEMPLATE,IMAGE_2,HOT FROM jchome_feed /*+ index(jchome_feed jchome_feed_hot) */ WHERE dateline>='1.340523786E9' ORDER BY hot DESC ;
SELECT IMAGE_3_LINK,FEEDID,FRIEND,TITLE_DATA,BODY_DATA,ICON,DATELINE,HASH_DATA,TITLE_TEMPLATE,IMAGE_1_LINK,APPID,BODY_TEMPLATE,IMAGE_4,USERNAME,IMAGE_1,IMAGE_3,IMAGE_4_LINK,TARGET_IDS,IDTYPE,"uid",BODY_GENERAL,IMAGE_2_LINK,ID,HASH_TEMPLATE,IMAGE_2,HOT FROM jchome_feed /*+ index(jchome_feed jchome_feed_dateline) */	WHERE "uid" IN ('0',3,2)	ORDER BY dateline DESC;
SELECT IMAGE_3_LINK,FEEDID,FRIEND,TITLE_DATA,BODY_DATA,ICON,DATELINE,HASH_DATA,TITLE_TEMPLATE,IMAGE_1_LINK,APPID,BODY_TEMPLATE,IMAGE_4,USERNAME,IMAGE_1,IMAGE_3,IMAGE_4_LINK,TARGET_IDS,IDTYPE,"uid",BODY_GENERAL,IMAGE_2_LINK,ID,HASH_TEMPLATE,IMAGE_2,HOT FROM jchome_feed /*+ index(jchome_feed jchome_feed_hot) */ WHERE dateline>='1.340523809E9' ORDER BY hot DESC ;
SELECT IMAGE_LINK,HOTUSER,BODY_DATA,DATELINE,TITLE_TEMPLATE,BODY_TEMPLATE,SID,TOPICID,USERNAME,"uid",BODY_GENERAL,IMAGE,TYPE,HOT FROM jchome_share /*+ index(jchome_share jchome_share_dateline) */ WHERE  "uid" IN (3,2) ORDER BY dateline DESC ;
SELECT IMAGE_LINK,HOTUSER,CREDIT,NOTENUM,EVENTINVITENUM,THREADNUM,ATTACHSIZE,BODY_DATA,LASTSEARCH,NEWPM,MOOD,main.DATELINE,TITLE_TEMPLATE,SHOWGIFTLINK,BODY_TEMPLATE,DOINGNUM,ALBUMNUM,POLLNUM,EVENTNUM,SHARENUM,IP,GIFTNUM,SID,TOPICID,main.USERNAME,EXPERIENCE,REGIP,GROUPID,MTAGINVITENUM,BLOGNUM,LASTLOGIN,ADDSIZE,ADDFRIEND,main."uid",BODY_GENERAL,IMAGE,NAME,NAMESTATUS,VIDEOSTATUS,VIEWNUM,POKENUM,UPDATETIME,LASTPOST,LASTSEND,AVATAR,TYPE,HOT,DOMAIN,FRIENDNUM,ADDFRIENDNUM,MYINVITENUM,FLAG,ADVGIFTCOUNT FROM jchome_share main LEFT JOIN jchome_space space ON space."uid"=main."uid" WHERE 1=1 ORDER BY main.dateline desc;
SELECT IMAGE_LINK,HOTUSER,CREDIT,NOTENUM,EVENTINVITENUM,THREADNUM,ATTACHSIZE,BODY_DATA,LASTSEARCH,NEWPM,MOOD,main.DATELINE,TITLE_TEMPLATE,SHOWGIFTLINK,BODY_TEMPLATE,DOINGNUM,ALBUMNUM,POLLNUM,EVENTNUM,SHARENUM,IP,GIFTNUM,SID,TOPICID,main.USERNAME,EXPERIENCE,REGIP,GROUPID,MTAGINVITENUM,BLOGNUM,LASTLOGIN,ADDSIZE,ADDFRIEND,main."uid",BODY_GENERAL,IMAGE,NAME,NAMESTATUS,VIDEOSTATUS,VIEWNUM,POKENUM,UPDATETIME,LASTPOST,LASTSEND,AVATAR,TYPE,HOT,DOMAIN,FRIENDNUM,ADDFRIENDNUM,MYINVITENUM,FLAG,ADVGIFTCOUNT FROM jchome_share main LEFT JOIN jchome_space space ON space."uid"=main."uid" WHERE 1=1 ORDER BY main.dateline desc;
</div>
			</div>
		</div>
		
		<h1>倾斜角度</h1>
		<a href="" class="zhuang360">afsdasdffffffffffff</a>
		<div id="qx">
			这是在倾斜
		</div>
		
		<p>
		<ul id="clock">
			<li id="second"></li>
			<li id="hour"></li>
			<li id="minute"></li>
		</ul>
		</p>
		
		
		<p>
			<div class="animo">
				
				this is 2012 !
			</div>
			
		</p>	
		
		<div style="height:500px;">
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
			<p></p>
		</div>
	</body>
</html>
